import React from 'react';
import {Form,Input,Button,notification} from 'antd'
import HgBreadCrumb from '../../../components/HgBreadCrumb'
import service from '../../../api'
import { useNavigate } from 'react-router-dom';

const SwiperAdd = () => {
    
    var history = useNavigate()

    const onFinish = async (values: any) => {
        //发请求, 完成新增
        var res = await service.swiper.banner_add( values );
        //弹出提示
        notification.success({message:'新增轮播图成功!',duration:2})
        //跳转到轮播图列表
        history(-1)
    };
    return (
        <div className='swiper-add'>
            <HgBreadCrumb />
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                style={{ maxWidth: 600 }}
                onFinish={onFinish}
            >
                <Form.Item
                label="轮播图链接"
                name="link"
                rules={[{ required: true, message: '输入图片链接' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                label="轮播图提示"
                name="alt"
                rules={[{ required: true, message: '输入图片提示' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                label="轮播图地址"
                name="img"
                rules={[{ required: true, message: '输入图片地址!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                    <Button type="primary" htmlType="submit">新增轮播图</Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default SwiperAdd;